<!DOCTYPE html>
<html>
	<head>
		<title>商品列表</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./css/shopList.css">
	</head>
	<body>

		<header>
			<div class="top content">
				<div class="left">
					<a href="#" class="topFou">电脑版</a>
					<a href="#">手机版</a>
				</div>
				<div class="right">
					<span>您好，欢迎来到交易猫！</span>
					<span>|</span>
					<span><a href="./login.html">登录</a></span>
					<span>|</span>
					<span><a href="./shopcar.html">购物车</a></span>
					<span>|</span>
					<span><a href="">我是卖家</a></span>
					<span>|</span>
					<span><a href="">下载APP</a></span>
				</div>
			</div>
			<div class="logo content">
				<img src="https://image.jiaoyimao.com/public/pc/images/logo.png?2022063014" alt="">
				<div class="nav-search">
					<ul>
						<li class="search-select">选择游戏 <span></span> </li>
						<li class="search-select">商品类型 <span></span> </li>
						<li class="search-select">请选择 <span></span> </li>
						<li class="search-inp"><input type="text" placeholder="请输入游戏/商品/店铺"></li>
						<li class="searchBtn"><input type="submit" value="搜索"></li>
					</ul>
				</div>
			</div>
		</header>
		<div class="nav">
			<ul>
				<li><a href="./index.html" >首页</a></li>
				<li><a href="./shopList.html" class="navFou">商品列表</a></li>
				<li><a href="">端游</a></li>
				<li><a href="">租号</a></li>
				<li><a href="">首充号</a></li>
				<li><a href="./detail.html">代练</a></li>
				<li><a href="./shopcar.html">个人中心</a></li>
				<li><a href="">帮助中心</a></li>
			</ul>
		</div>
		<div id="main">
			<ul class="shoplist">
				
			</ul>
			<div class="controller">
			
			</div>
		</div>
		<div class="footer-wrap">
			<footer>
				<div class="footer-link">
					<ul>
						<li>
							<strong>新手入门</strong>
							<a href="">如何购买商品</a>
							<a href="">如何发布商品</a>
						</li>
						<li>
							<strong>诚信服务</strong>
							<a href="">用户协议</a>
							<a href="">隐私权协议</a>
							<a href="">儿童个人信息保护规则</a>
							<a href="">免责声明</a>
							<a href="">7*24小时服务</a>
						</li>
						<li>
							<strong>交易保障</strong>
							<a href="">寄售交易</a>
							<a href="">支付宝交易</a>
							<a href="">投诉与建议</a>
						</li>
						<li>
							<strong>售后服务</strong>
							<a href="">在线咨询</a>
						</li>
						<li>
							<strong>关于我们</strong>
							<a href="">关于交易猫</a>
							<a href="">联系我们</a>
						</li>
					</ul>
				</div>
				<div class="certification">
					<a href=""><i class="pic1"></i>安全认证联盟</a>
					<a href=""><i class="pic2"></i></a>
				</div>
				<div class="company-info">
					<p>
						© 2013-2022 jiaoyimao.com &nbsp; &nbsp; 版权所有 &nbsp;&nbsp;
						粤ICP备14053110号 &nbsp;&nbsp;
						增值电信业务经营许可证：粤B2-20150064 &nbsp;&nbsp;
						营业执照
					</p>
				</div>
			</footer>
		</div>
	</body>
</html>

<script src="./js/jquery.js"></script>
<script>
	let user = {
		"id": 1,
		"name": "jack"
	}
	sessionStorage.setItem('user', JSON.stringify(user)) //相当于用户登录了
	//保存当前页数
	var currentPage = 1
	var page = null
	//数据的请求
	//http://10.41.12.8:8888/shops?_limit=2&_page=2 _limit表示个数 对应的 _page 表示页数
	function loadData(page = 1, limit = 4) {
		$.ajax({
			type: "get",
			url: `http://localhost:9900/shops?_limit=${limit}&_page=${page}`,
			success(data) {
				//先把ul变成空
				$('.shoplist').empty()
				data.forEach(shop => {
					var htmlCode = $('.shoplist').html() + `
							<li>
								<div class="sfz_01_34">
									<a href="./details.html?id=${shop.id}">
										<img src="${shop.pirUrl}">
									</a>
									<div class="price">¥${shop.price}</div>
									<div class="coun">${shop.goodDesc}</div>
									<h4 class="seckill_mod_goods_title" style="text-align: center;">${shop.goodTitle}</h4>
									<div class="shopcar">加入购物车</div>
									<div class="buy">
										<a href="#" class="seckill_mod_goods_info_i" onclick="addToCar(${shop.id})">立即抢购</a>
									</div>
								</div>
							</li>
                         `

					$(".shoplist").html(htmlCode)
				});
			}
		})
	}
	function addToCar(shopid) {
		//获取用户的id 获取对应的shopId
		var userid = JSON.parse(sessionStorage.getItem("user")).id
		console.log(userid);
		//查询对应的购物车里面有没有这个商品
		//http://10.41.12.8:8888/car?shopid=68577367392
		$.ajax({
			type: "get",
			url: `http://localhost:9900/car?shopid=${shopid}&userid=${userid}`,
			dataType: "json",
			success: function(response) {
				if (response.length == 0) { //查不到数据
					$.ajax({
						type: "post",
						url: "http://localhost:9900/car",
						data: JSON.stringify({
							id: Date.now(), //利用时间挫完成对应的id添加操作 购物车id
							userid,
							shopid,
							count: 1
						}),
						dataType: "json",
						contentType: "application/json",
						success: function(response) {
							console.log('成功');
						}
					});
				} else {
					let car = response[0]
					car.count++
					//查的到数据
					$.ajax({
						type: "put",
						url: "http://localhost:9900/car/" + car.id,
						data: JSON.stringify(
							car
						),
						dataType: "json",
						contentType: "application/json",
						success: function(response) {
							console.log('成功');
						}
					});
				}
			}
		});
	}
	loadData()
	//生成对应的换页的按钮
	$.ajax({
		type: "get",
		url: "http://localhost:9900/page",
		dataType: "json",
		success: function(response) {
			// console.log(response);
			// 根据对应的page来生成对应的页数
			$('.controller').append($("<button class='prev'>上一页</button>"))
			//在中间添加对应的 显示页数
			for (let i = 1; i <= response.page; i++) {
				$('.controller').append($(`<button class='btn'>${i}</button>`))
			}
			$('.controller').append($("<button class='next'>下一页</button>"))
			page = response.page
			handlerChangePage()
		}
	});
	//修改对应页面的
	function handlerChangePage() {
		//给对应的button添加事件
		$('.prev').click(function() {
			//将当前页减1
			currentPage--
			loadData(currentPage)
			//更改对应按钮的背景颜色
			$($('.btn')[currentPage - 1]).css('backgroundColor', "pink").siblings().css('backgroundColor', "")
			//如果是第一个的话
			if (currentPage == 1) {
				//当你为第一页的时候 上一页不能点击
				$('.prev').attr('disabled', 'disabled')
				return
			} else {
				$('.prev').removeAttr('disabled')
			}
			//如果是最后一页的话
			if (currentPage == page) {
				//当你为第一页的时候 上一页不能点击
				$('.next').attr('disabled', 'disabled')
			} else {
				$('.next').removeAttr('disabled')
			}
		})
		//给对应的button添加事件
		$('.next').click(function() {
			//如果是第一个的话
			if (currentPage == page) {
				//当你为第一页的时候 上一页不能点击
				$(this).attr('disabled', 'disabled')
				return
			} else {
				$(this).removeAttr('disabled')
			}
			//将当前页加1
			currentPage++
			loadData(currentPage)
			//更改对应按钮的背景颜色
			$($('.btn')[currentPage - 1]).css('backgroundColor', "pink").siblings().css('backgroundColor', "")
			//如果是第一个的话
			if (currentPage == 1) {
				//当你为第一页的时候 上一页不能点击
				$('.prev').attr('disabled', 'disabled')
				return
			} else {
				$('.prev').removeAttr('disabled')
			}
			//如果是最后一页的话
			if (currentPage == page) {
				//当你为第一页的时候 上一页不能点击
				$('.next').attr('disabled', 'disabled')
			} else {
				$('.next').removeAttr('disabled')
			}
		})
		$('.btn').click(function() {
			//获取自己里面显示的值
			currentPage = Number($(this).text())
			loadData(currentPage)
			//更改对应按钮的背景颜色
			$($('.btn')[currentPage - 1]).css('backgroundColor', "pink").siblings().css('backgroundColor', "")
			//如果是第一个的话
			if (currentPage == 1) {
				//当你为第一页的时候 上一页不能点击
				$('.prev').attr('disabled', 'disabled')
				return
			} else {
				$('.prev').removeAttr('disabled')
			}
			//如果是最后一页的话
			if (currentPage == page) {
				//当你为第一页的时候 上一页不能点击
				$('.next').attr('disabled', 'disabled')
			} else {
				$('.next').removeAttr('disabled')
			}
		})
	}
</script>
